<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Flex-1</title>
  <style>
    #deal {
      display: flex;
      flex-flow: row rap;
    }

    .sale-item {
      display: flex;
      flex-flow: column;
    }

    .sale-item>img {
      order: -1;
      align-self: center;
    }

    .sale-item>button {
      margin-top: auto;
    }
  </style>
</head>

<body>
  <section id="deals">
    <section class="sale-item">
      <h1>Computer Starter Kit</h1>
      <p>This is the best computer money can buy, if you don't have much money.</p>
      <ul>
        <li>Computer</li>
        <li>Monitor</li>
        <li>Keyboard</li>
        <li>Mouse</li>
      </ul>
      <img src="./flex.jpg" alt="You get: a white computer with matching peripherals.">
      <button>BUY NOW</button>
    </section>
    <section class="sale-item">
    </section>
  </section>
</body>

</html>